<template>

  <div class="cards">
    <el-card>
      <template #header>
        <HeadContent title="审批休假"></HeadContent>
      <TagComtent></TagComtent>
        <div class="card-header">
          <span>新增人员排班</span>
        </div>
      </template>

      <div class="first">
        <div class="information">
          <el-form ref="ruleFormRef" label-width="200px" :rules="rules" :model="ruleForm" class="demo-ruleForm">
            <el-form-item class="required" label="员工编号:" prop="scheduling">
              <el-input v-model="ruleForm.staffNum" type="text"></el-input>
            </el-form-item>

            <el-form-item class="required" label="排班类型:" prop="scheduling">
              <el-select v-model="ruleForm.scheduleType" placeholder="请选择排班类型">
                <el-option label="全天" value="全天"></el-option>
                <el-option label="半天" value="半天"></el-option>
              </el-select>



            </el-form-item>
            <el-form-item>
              <el-button type="primary">
                提交
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>




    </el-card>



  </div>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import HeadContent from '@/components/HeadContent.vue'
const ruleFormRef = ref<FormInstance>()




const ruleForm = reactive({
  staffNum: '',
  scheduleType: '',
 
})

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
interface RuleForm {
  staffNum: string,
  scheduleType: string,
  
}
const rules = reactive<FormRules<RuleForm>>({
  staffNum: [
    { required: true, message: '请输入员工编号', trigger: 'blur' },
  ],
  scheduleType: [
    { required: true, message: '请选择排班类型', trigger: 'change' },
  ],  

})

</script>
<style scoped>
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-card {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form-item {
  display: flex;


}

.required .el-form-item__label::before {
  content: '*';
  color: red;
  margin-right: 0px;
  /* 控制星号与标签文本之间的间距 */
}

.example-basic .el-date-editor {
  margin: 8px;
}
</style>
